class Lbt {
    constructor(el, options = {}) {
        this.num = 1
        this.el = document.querySelector(el)
        this.t = null
        this.options = options
        this.init()
    }
}
Lbt.prototype.init = function() {
    this.defaultConfig()
    this.changeImg()
    this.synchro()
    this.circleInOut()
}
Lbt.prototype.defaultConfig = function() {
    let liObjS = this.el.querySelectorAll('ul li')
    liObjS.forEach(item => {
        item.style.background = this.options.colorStyle
    })
}
Lbt.prototype.changeImg = function() {
    this.t = setInterval(() => {
        this.num++
            if (this.num >= 7) this.num = 1
        let imgObj = this.el.querySelector('img')
        imgObj.src = `./imgs/img${this.num}.jpg`
        this.synchro()
    }, 1000)
}
Lbt.prototype.synchro = function() {
    let liObjS = this.el.querySelectorAll('ul li')
    liObjS.forEach(item => item.className = "")
    liObjS[this.num - 1].className = 'active'
}
Lbt.prototype.circleInOut = function() {
    let liObjS = this.el.querySelectorAll('ul li')
    liObjS.forEach((item, index) => {
        item.onmouseover = () => {
            clearInterval(this.t)
            this.el.querySelector('img').src = `./imgs/img${index+1}.jpg`
            liObjS.forEach(item => item.className = "")
            liObjS[index].className = 'active'
            this.num = index + 1
        }
        item.onmouseout = () => {
            this.changeImg()
        }
    })

}